<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
    .page-statistics-data .widget-survey .widget-screen{
        width: 100%;
        display: flex;
        justify-content: center;
        position: relative;
    }
    select[name='coach_id']{
        outline: none;
        border: 1px solid #eee;
        background: transparent;
        padding: 4px 10px;
        border-radius: 6px;
        margin-left: 10px;
    }
    .table-flex-right{
        position: absolute;
        right: 0;
        display: flex;
        align-items: center;
    }
    .table-flex-right a{
        margin-left: 10px;
        line-height: 0;
    }
    .table-flex-right img{
        width: 24px;
        vertical-align: center;
    }
    .classtype-box{
        border: 1px solid #1686ef;
        border-radius: 5px;
        padding: 0;
        margin-right: 5px;
        line-height: 0;
    }
    .classtype-box a{
        padding: 0px 8px;
        font-size: 12px;
        margin-left: 0px;
        display: inline-block;
        height: 24px;
        line-height: 24px;
    }
    .classtype-box a.active{
        background: #1686ef;
        color: #fff!important;
    }
</style>
<div id="app" v-cloak class="page-statistics-data row-content am-cf">
    <!-- 数据概况 -->
    <div class="row">
        <div class="am-u-sm-12 am-margin-bottom">
            <div class="widget widget-survey am-cf" v-loading="survey.loading">
                <div class="widget-head am-cf">
                    <div class="widget-title">数据概况</div>
                    <div class="widget-screen am-cf">
                        <!-- 日期选择器 -->
                        <div class="yxs-date-editor am-fl">
                            <el-date-picker
                                v-model="survey.dateValue"
                                type="daterange"
                                size="small"
                                @change="onChangeDate"
                                value-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        </div>
                        <!-- 快捷选项 -->
                        <div class="widget-screen_shortcut am-fl">
                            <div class="shortcut-days am-cf">
                                <div class="shortcut-days_item am-fl">
                                    <a href="javascript:void(0);" @click="onFastDate(7)">7天</a>
                                </div>
                                <div class="shortcut-days_item am-fl">
                                    <a href="javascript:void(0);" @click="onFastDate(30)">30天</a>
                                </div>
                                <div class="shortcut-days_item item-clear am-fl">
                                    <a href="javascript:void(0);" @click="onFastDate(0)">清空</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="widget-body">
                    <div class="widget-body-center am-cf">
                        <div class="am-u-sm-6 am-u-md-6 am-u-lg-4">
                            <div class="widget-outline dis-flex flex-y-center">
                                <div class="outline-left">
                                    <img src="assets/store/img/statistics/survey/03.png" alt="">
                                </div>
                                <div class="outline-right dis-flex flex-dir-column flex-x-center">
                                    <div class="item-name">用户数量</div>
                                    <div class="item-value">{{ survey.values.user_total }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="am-u-sm-6 am-u-md-6 am-u-lg-4">
                            <div class="widget-outline dis-flex flex-y-center">
                                <div class="outline-left">
                                    <img src="assets/store/img/statistics/survey/03.png" alt="">
                                </div>
                                <div class="outline-right dis-flex flex-dir-column flex-x-center">
                                    <div class="item-name">会员人数</div>
                                    <div class="item-value">{{ survey.values.consume_users }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="am-u-sm-6 am-u-md-6 am-u-lg-4">
                            <div class="widget-outline dis-flex flex-y-center">
                                <div class="outline-left">
                                    <img src="assets/store/img/statistics/survey/02.png" alt="">
                                </div>
                                <div class="outline-right dis-flex flex-dir-column flex-x-center">
                                    <div class="item-name">总销售额</div>
                                    <div class="item-value">{{ survey.values.recharge_total }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="am-u-sm-6 am-u-md-6 am-u-lg-4">
                            <div class="widget-outline dis-flex flex-y-center">
                                <div class="outline-left">
                                    <img src="assets/store/img/statistics/survey/04.png" alt="">
                                </div>
                                <div class="outline-right dis-flex flex-dir-column flex-x-center">
                                    <div class="item-name">商品订单数</div>
                                    <div class="item-value">{{ survey.values.order_total }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="am-u-sm-6 am-u-md-6 am-u-lg-4">
                            <div class="widget-outline dis-flex flex-y-center">
                                <div class="outline-left">
                                    <img src="assets/store/img/statistics/survey/05.png" alt="">
                                </div>
                                <div class="outline-right dis-flex flex-dir-column flex-x-center">
                                    <div class="item-name">商品数量</div>
                                    <div class="item-value">{{ survey.values.goods_total }}</div>
                                </div>
                            </div>
                        </div>

                        <div class="am-u-sm-6 am-u-md-6 am-u-lg-4">
                            <div class="widget-outline dis-flex flex-y-center">
                                <div class="outline-left">
                                    <img src="assets/store/img/statistics/survey/02.png" alt="">
                                </div>
                                <div class="outline-right dis-flex flex-dir-column flex-x-center">
                                    <div class="item-name">商品订单总额</div>
                                    <div class="item-value">{{ survey.values.order_total_money }}</div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 近七日交易走势 -->
    <div class="row">
        <div class="am-u-sm-12 am-margin-bottom">
            <div class="widget widget-survey am-cf" v-loading="survey.loading">
                <div class="widget am-cf">
                    <div class="widget-head">
                        <div class="widget-title">销售额走势图</div>
                        <div class="widget-screen am-cf">
                            <!-- 日期选择器 -->
                            <div class="yxs-date-editor am-fl">
                                <el-date-picker
                                    v-model="sale.dateValue"
                                    type="daterange"
                                    size="small"
                                    @change="onSaleChangeDate"
                                    value-format="yyyy-MM-dd"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                            <!-- 快捷选项 -->
                            <div class="widget-screen_shortcut am-fl">
                                <div class="shortcut-days am-cf">
                                    <div class="shortcut-days_item am-fl">
                                        <a href="javascript:void(0);" @click="onFastDate(7,1)">7天</a>
                                    </div>
                                    <div class="shortcut-days_item am-fl">
                                        <a href="javascript:void(0);" @click="onFastDate(30,1)">30天</a>
                                    </div>
                                    <div class="shortcut-days_item item-clear am-fl">
                                        <a href="javascript:void(0);" @click="onFastDate(0,1)">清空</a>
                                    </div>
                                    <div class="shortcut-days_item item-clear am-fl">
                                        <span>门店</span>
                                        <select name="coach_id" v-model="sale.shop_id" @change="handleChangeShop">
                                            <option value="">全部</option>
                                            <option v-for="(item,index) in shop.shopList" :key="index" :value="item.shop_id">{{item.shop_name}}</option>
                                        </select>
                                    </div>
                                    <div class="shortcut-days_item item-clear am-fl table-flex-right">
                                        <a href="javascript:void(0);" @click="download_shop()"><img src="assets/store/img/download.svg" alt=""></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="widget-body am-cf">
                        <div id="echarts-trade" class="widget-echarts"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 门店课程业绩统计 -->
    <div class="row">
        <div class="am-u-sm-12 am-margin-bottom">
            <div class="widget widget-survey am-cf" v-loading="shop.loading">
                <div class="widget am-cf">
                    <div class="widget-head">
                        <div class="widget-title">门店课程业绩走势图</div>
                        <div class="widget-screen am-cf">
                            <!-- 日期选择器 -->
                            <div class="yxs-date-editor am-fl">
                                <el-date-picker
                                    v-model="shop.dateValue"
                                    type="daterange"
                                    size="small"
                                    @change="onShopChangeDate"
                                    value-format="yyyy-MM-dd"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                            <!-- 快捷选项 -->
                            <div class="widget-screen_shortcut am-fl">
                                <div class="shortcut-days am-cf">
                                    <div class="shortcut-days_item am-fl">
                                        <a href="javascript:void(0);" @click="onFastDate(7,2)">7天</a>
                                    </div>
                                    <div class="shortcut-days_item am-fl">
                                        <a href="javascript:void(0);" @click="onFastDate(30,2)">30天</a>
                                    </div>
                                    <div class="shortcut-days_item item-clear am-fl">
                                        <a href="javascript:void(0);" @click="onFastDate(0,2)">清空</a>
                                    </div>
                                    <!--                                     <select name="shop_id" v-model="shop.shop_id" @change="handleShopChange">-->
                                    <!--                                            <option value="">全部</option>-->
                                    <!--                                            <option v-for="(item,index) in shop.shopList" :key="index" :value="item.shop_id">{{item.shop_name}}</option>-->
                                    <!--                                     </select>-->
                                    <div class="shortcut-days_item item-clear am-fl">
                                        <span>门店</span>
                                        <select name="coach_id" v-model="coach.coach_id" @change="handleShopChange">
                                            <option value="">全部</option>
                                            <option v-for="(item,index) in shop.shopList" :key="index" :value="item.shop_id">{{item.shop_name}}</option>
                                        </select>
                                    </div>
                                    <div class="shortcut-days_item item-clear am-fl table-flex-right">
                                        <a href="javascript:void(0);" @click="download_shop('order_source')"><img src="assets/store/img/download.svg" alt=""></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="widget-body am-cf">
                        <div id="echarts-trade1" class="widget-echarts"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 门店课程统计 -->
    <div class="row">
        <div class="am-u-sm-12 am-margin-bottom">
            <div class="widget widget-survey am-cf" v-loading="store.loading">
                <div class="widget am-cf">
                    <div class="widget-head">
                        <div class="widget-title">门店课程统计</div>
                        <div class="widget-screen am-cf">
                            <!-- 日期选择器 -->
                            <div class="yxs-date-editor am-fl">
                                <el-date-picker
                                    v-model="store.dateValue"
                                    type="daterange"
                                    size="small"
                                    @change="onStoreChangeDate"
                                    value-format="yyyy-MM-dd"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                            <!-- 快捷选项 -->
                            <div class="widget-screen_shortcut am-fl">
                                <div class="shortcut-days am-cf">
                                    <div class="shortcut-days_item am-fl">
                                        <a href="javascript:void(0);" @click="onFastDate(7,3)">7天</a>
                                    </div>
                                    <div class="shortcut-days_item am-fl">
                                        <a href="javascript:void(0);" @click="onFastDate(30,3)">30天</a>
                                    </div>
                                    <div class="shortcut-days_item item-clear am-fl">
                                        <a href="javascript:void(0);" @click="onFastDate(0,3)">清空</a>
                                    </div>
                                    <!--                                    <div class="shortcut-days_item am-fl">-->
                                    <!--                                        -->
                                    <!--                                    </div>-->
                                    <!--                                    <div class="shortcut-days_item am-fl">-->
                                    <!--                                        -->
                                    <!--                                    </div>-->
                                    <div class="shortcut-days_item item-clear am-fl table-flex-right">
                                        <div class="classtype-box">
                                            <a :class="type == 1?'active':''" href="javascript:void(0);" @click="onTypeDate(1)">私课</a>
                                            <a :class="type == 2?'active':''" href="javascript:void(0);" @click="onTypeDate(2)">团课</a>
                                        </div>
                                        <a href="javascript:void(0);" @click="download_store()"><img src="assets/store/img/download.svg" alt=""></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="widget-body am-cf">
                        <div id="echarts-trade2" class="widget-echarts"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 教练统计 -->
    <div class="row">
        <div class="am-u-sm-12 am-margin-bottom">
            <div class="widget widget-survey am-cf" v-loading="coach.loading">
                <div class="widget am-cf">
                    <div class="widget-head">
                        <div class="widget-title">教练课程统计</div>
                        <div class="widget-screen am-cf">
                            <!-- 日期选择器 -->
                            <div class="yxs-date-editor am-fl">
                                <el-date-picker
                                    v-model="coach.dateValue"
                                    type="daterange"
                                    size="small"
                                    @change="onCoachChangeDate"
                                    value-format="yyyy-MM-dd"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                            <!-- 快捷选项 -->
                            <div class="widget-screen_shortcut am-fl">
                                <div class="shortcut-days am-cf">
                                    <div class="shortcut-days_item am-fl">
                                        <a href="javascript:void(0);" @click="onFastDate(7,4)">7天</a>
                                    </div>
                                    <div class="shortcut-days_item am-fl">
                                        <a href="javascript:void(0);" @click="onFastDate(30,4)">30天</a>
                                    </div>
                                    <div class="shortcut-days_item item-clear am-fl">
                                        <a href="javascript:void(0);" @click="onFastDate(0,4)">清空</a>
                                    </div>
                                    <!--                                    <div class="shortcut-days_item item-clear am-fl">-->
                                    <!--                                        -->
                                    <!--                                    </div>-->
                                    <div class="shortcut-days_item item-clear am-fl table-flex-right">
                                        <span>教练</span>
                                        <select name="coach_id" v-model="coach.coach_id" @change="handleChange">
                                            <option value="">全部</option>
                                            <option v-for="(item,index) in coach.coachList" :key="index" :value="item.coach_id">{{item.real_name}}</option>
                                        </select>
                                        <a href="javascript:void(0);" @click="download_coach()"><img src="assets/store/img/download.svg" alt=""></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="widget-body am-cf">
                        <div id="echarts-trade3" class="widget-echarts"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 教练销售统计 -->
    <div class="row">
        <div class="am-u-sm-12 am-margin-bottom">
            <div class="widget widget-survey am-cf" v-loading="coach.loading">
                <div class="widget am-cf">
                    <div class="widget-head">
                        <div class="widget-title">教练销售统计</div>
                        <div class="widget-screen am-cf">
                            <!-- 日期选择器 -->
                            <div class="yxs-date-editor am-fl">
                                <el-date-picker
                                    v-model="coach_sale.dateValue"
                                    type="daterange"
                                    size="small"
                                    @change="onCoachSaleChangeDate"
                                    value-format="yyyy-MM-dd"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                            <!-- 快捷选项 -->
                            <div class="widget-screen_shortcut am-fl">
                                <div class="shortcut-days am-cf">
                                    <div class="shortcut-days_item am-fl">
                                        <a href="javascript:void(0);" @click="onFastDate(7,5)">7天</a>
                                    </div>
                                    <div class="shortcut-days_item am-fl">
                                        <a href="javascript:void(0);" @click="onFastDate(30,5)">30天</a>
                                    </div>
                                    <div class="shortcut-days_item item-clear am-fl">
                                        <a href="javascript:void(0);" @click="onFastDate(0,5)">清空</a>
                                    </div>
                                    <!--                                    <div class="shortcut-days_item item-clear am-fl">-->
                                    <!--                                        -->
                                    <!--                                    </div>-->
                                    <div class="shortcut-days_item item-clear am-fl table-flex-right">
                                        <span>教练</span>
                                        <select name="coach_id" v-model="coach_sale.coach_id" @change="handleChange2">
                                            <option value="">全部</option>
                                            <option v-for="(item,index) in coach.coachList" :key="index" :value="item.coach_id">{{item.real_name}}</option>
                                        </select>
                                        <a href="javascript:void(0);" @click="download_coach_sale()"><img src="assets/store/img/download.svg" alt=""></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="widget-body am-cf">
                        <div id="echarts-trade4" class="widget-echarts"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 排行榜 -->
    <div class="row">
        <div class="am-u-sm-6 am-margin-bottom">
            <div class="widget-ranking widget am-cf">
                <div class="widget-head">
                    <div class="widget-title">商品销售榜</div>
                </div>
                <div class="widget-body am-cf">
                    <table width="100%" class="am-table am-table-compact am-table-striped
                         tpl-table-black">
                        <thead>
                        <tr>
                            <th class="am-text-center" width="15%">排名</th>
                            <th class="am-text-left" width="45%">商品</th>
                            <th class="am-text-center" width="20%">销量</th>
                            <th class="am-text-center" width="20%">销售额</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item, index) in goodsRanking">
                            <td class="am-text-middle am-text-center">
                                <div v-if="index < 3 && item.total_sales_num > 0" class="ranking-img">
                                    <img :src="'assets/store/img/statistics/ranking/0' + (index + 1) + '.png'" alt="">
                                </div>
                                <span v-else>{{ index + 1 }}</span>
                            </td>
                            <td class="am-text-middle">
                                <p class="ranking-item-title am-text-truncate">{{ item.goods_name }}</p>
                            </td>
                            <td class="am-text-middle am-text-center">{{ item.total_sales_num }}</td>
                            <td class="am-text-middle am-text-center">{{ item.sales_volume }}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="am-u-sm-6 am-margin-bottom">
            <div class="widget-ranking widget am-cf">
                <div class="widget-head">
                    <div class="widget-title">用户消费榜</div>
                </div>
                <div class="widget-body am-cf">
                    <table width="100%" class="am-table am-table-compact am-table-striped
                         tpl-table-black">
                        <thead>
                        <tr>
                            <th class="am-text-center" width="20%">排名</th>
                            <th class="am-text-left" width="50%">用户昵称</th>
                            <th class="am-text-center" width="30%">实际消费金额</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item, index) in userExpendRanking">
                            <td class="am-text-middle am-text-center">
                                <div v-if="index < 3 && item.expend_money > 0" class="ranking-img">
                                    <img :src="'assets/store/img/statistics/ranking/0' + (index + 1) + '.png'" alt="">
                                </div>
                                <span v-else>{{ index + 1 }}</span>
                            </td>
                            <td class="am-text-middle">
                                <p class="ranking-item-title am-text-truncate">{{ item.nickName }}</p>
                            </td>
                            <td class="am-text-middle am-text-center">{{ item.expend_money }}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="assets/common/js/echarts.min.js"></script>
<script src="assets/common/js/echarts-walden.js"></script>
<script src="assets/common/js/vue.min.js?v=1.1.35"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            // 数据概况
            survey: {
                loading: false,
                dateValue: [],
                values: <?= \app\common\library\helper::jsonEncode($survey) ?>
            },
            sale: {
                loading: false,
                dateValue: [],
                shop_id:'' //销售业绩门店
            },
            shop: {
                loading: false,
                dateValue: [],
                type: 1,
                shop_id:'',
                shopList:<?= $shopList ?>
            },
            store: {
                loading: false,
                dateValue: [],
            },
            coach: {
                loading: false,
                dateValue: [],
                coach_id: '',
                coachList:<?= $coachList ?>
            },
            coach_sale: {
                loading: false,
                dateValue: [],
                coach_id: '',
                coachList:<?= $coachList ?>
            },
            // 商品销售榜
            goodsRanking: <?= \app\common\library\helper::jsonEncode($goodsRanking) ?>,
            // 用户消费榜
            userExpendRanking: <?= \app\common\library\helper::jsonEncode($userExpendRanking) ?>,
            type:1
        },

        mounted() {
            // 近七日交易走势
            this.drawLine();
            this.drawLine_shop();
            this.drawLine_store();
            this.__getApiData__coach();
            this.__getApiData__coach_sale();
        },
        computed:{

        },

        methods: {
            //销售业绩(门店切换)
            handleChangeShop:function (e){
                console.log(e.target);
                var app = this;
                app.sale.shop_id=e.target.value;
                this.__getApiData__sale();
            },
            handleChange:function (e){
                console.log(e.target);
                var app = this;
                app.coach.coach_id=e.target.value;
                this.__getApiData__coach();
            },
            handleChange2:function (e){
                console.log(e.target);
                var app = this;
                app.coach_sale.coach_id=e.target.value;
                // app.coach_sale.dateValue = [];
                this.__getApiData__coach_sale();
            },
            handleShopChange:function (e){
                console.log(e.target);
                var app = this;
                app.shop.shop_id=e.target.value;
                this.__getApiData_shop();
            },
            // 监听事件：日期选择快捷导航
            onFastDate: function (days, type = 0) {
                var startDate, endDate;
                // 清空日期
                if (days === 0) {
                    this.survey.dateValue = [];
                } else {
                    startDate = $.getDay(-days);
                    endDate = $.getDay(0);

                    // api: 获取数据概况
                    if (type === 0) {
                        this.survey.dateValue = [startDate, endDate];
                        this.__getApiData__survey(startDate, endDate);
                    } else if (type === 1) {
                        this.sale.dateValue = [startDate, endDate];
                        this.__getApiData__sale(startDate, endDate);
                    } else if (type === 2) {
                        this.shop.dateValue = [startDate, endDate];
                        this.__getApiData_shop(startDate, endDate);
                    } else if (type === 3) {
                        this.store.dateValue = [startDate, endDate];
                        this.__getApiData__store(startDate, endDate);
                    } else if (type === 4) {
                        this.coach.dateValue = [startDate, endDate];
                        this.__getApiData__coach(startDate, endDate);
                    } else if (type === 5) {
                        this.coach_sale.dateValue = [startDate, endDate];
                        this.__getApiData__coach_sale(startDate, endDate);
                    }
                }
            },

            // 监听事件：日期选择框改变
            onChangeDate: function (e) {
                // api: 获取数据概况
                this.__getApiData__survey(e[0], e[1]);
            },
            // 总销售量
            onSaleChangeDate: function (e) {
                this.__getApiData__sale(e[0], e[1]);
            },
            // 线下销售量
            onShopChangeDate: function (e) {
                this.__getApiData_shop(e[0], e[1]);
            },
            // 门店课时
            onStoreChangeDate: function (e) {
                this.__getApiData__store(e[0], e[1]);
            },
            onTypeDate: function (e) {
                this.type = e;
                this.__getApiData__store(this.store.dateValue[0], this.store.dateValue[1]);
            },
            // 教练课时
            onCoachChangeDate: function (e) {
                this.__getApiData__coach(e[0], e[1]);
            },
            // 教练销售
            onCoachSaleChangeDate: function (e) {
                this.coach_sale.dateValue = [e[0],e[1]];
                this.__getApiData__coach_sale(e[0], e[1]);
            },
            // 获取数据概况
            __getApiData__survey: function (startDate, endDate) {
                var app = this;
                // 请求api数据
                app.survey.loading = true;
                // api地址
                var url = '<?= url('statistics.data/survey') ?>';
                $.post(url, {
                    startDate: startDate,
                    endDate: endDate
                }, function (result) {
                    app.survey.values = result.data;
                    app.survey.loading = false;
                });
            },
            download_shop: function ($type = '') {
                var url = '<?= url('statistics.data/shop_csv') ?>';
                var params = '';
                if ($type) {
                    if (this.shop.dateValue.length === 0) {
                        return false;
                    }
                    params = "&startDate=" + this.shop.dateValue[0] + "&endDate=" + this.shop.dateValue[1];
                    params += "&order_source=20&shop_id="+this.shop.shop_id;
                } else {
                    if (this.sale.dateValue.length === 0) {
                        return false;
                    }
                    params = "&startDate=" + this.sale.dateValue[0] + "&endDate=" + this.sale.dateValue[1]+"&shop_id="+this.sale.shop_id;
                }
                window.location.href = url + params
            },
            download_store: function () {
                if (this.store.dateValue.length === 0) {
                    alert("选择时间范围");
                    return false;
                }
                var url = '<?= url('statistics.data/course') ?>';
                var params = "&export=1&startDate=" + this.store.dateValue[0] + "&endDate=" + this.store.dateValue[1];
                params += "&type=" + this.type;
                window.location.href = url + params
            },
            download_coach: function () {
                if (this.coach.dateValue.length === 0) {
                    alert("选择时间范围");
                    return false;
                }
                var url = '<?= url('statistics.data/coach') ?>';
                var params = "&export=1&startDate=" + this.coach.dateValue[0] + "&endDate=" + this.coach.dateValue[1];
                params +="&coach_id="+this.coach.coach_id;
                console.log(params);
                window.location.href = url + params
            },
            download_coach_sale: function () {
                if (this.coach_sale.dateValue.length === 0) {
                    alert("选择时间范围");
                    return false;
                }
                var url = '<?= url('statistics.data/coach_sale') ?>';
                var params = "&export=1&startDate=" + this.coach_sale.dateValue[0] + "&endDate=" + this.coach_sale.dateValue[1];
                params +="&coach_id="+this.coach_sale.coach_id;
                console.log(params);
                window.location.href = url + params
            },
            // 销售额统计
            __getApiData__sale: function (startDate, endDate) {
                var app = this;
                // 请求api数据
                app.survey.loading = true;
                // api地址
                var url = '<?= url('statistics.data/shop') ?>';
                $.post(url, {
                    shop_id:app.sale.shop_id,
                    startDate: startDate,
                    endDate: endDate
                }, function (result) {
                    //app.survey.values = result.data;
                    app.survey.loading = false;

                    var dom = document.getElementById('echarts-trade');
                    echarts.init(dom, 'walden').setOption({
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['成交量', '成交额']
                        },
                        toolbox: {
                            show: true,
                            showTitle: false,
                            feature: {
                                mark: {show: true},
                                magicType: {show: true, type: ['line', 'bar']}
                            }
                        },
                        calculable: true,
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: result.data.date
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '成交额',
                                type: 'line',
                                data: result.data.order_total_price
                            },
                            {
                                name: '成交量',
                                type: 'line',
                                data: result.data.order_total
                            }
                        ]
                    }, true);
                });
            },
            // 销售额统计
            __getApiData_shop: function (startDate, endDate) {
                var app = this;
                // 请求api数据
                app.survey.loading = true;
                // api地址
                var url = '<?= url('statistics.data/shop') ?>';
                $.post(url, {
                    startDate: startDate,
                    endDate: endDate,
                    order_source: 20,
                    shop_id:app.shop.shop_id
                }, function (result) {
                    //app.survey.values = result.data;
                    app.survey.loading = false;

                    var dom = document.getElementById('echarts-trade1');
                    echarts.init(dom, 'walden').setOption({
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['课时消耗', '课时价值']
                        },
                        toolbox: {
                            show: true,
                            showTitle: false,
                            feature: {
                                mark: {show: true},
                                magicType: {show: true, type: ['line', 'bar']}
                            }
                        },
                        calculable: true,
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: result.data.date
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '课时价值',
                                type: 'line',
                                data: result.data.order_total_price
                            },
                            {
                                name: '课时消耗',
                                type: 'line',
                                data: result.data.order_total
                            }
                        ]
                    }, true);
                });
            },
            // 门店课时统计
            __getApiData__store: function (startDate, endDate) {
                var app = this;
                // 请求api数据
                app.store.loading = true;
                // api地址
                var url = '<?= url('statistics.data/course') ?>';
                $.post(url, {
                    startDate: startDate,
                    endDate: endDate,
                    type: app.type,
                    from: 1
                }, function (result) {
                    app.store.values = result.data;
                    app.store.loading = false;

                    var dom = document.getElementById('echarts-trade2');
                    echarts.init(dom, 'walden').setOption({
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['课时消耗', '课时价值']
                        },
                        toolbox: {
                            show: true,
                            showTitle: false,
                            feature: {
                                mark: {show: true},
                                magicType: {show: true, type: ['line', 'bar']}
                            }
                        },
                        calculable: true,
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: result.data.date
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '课时价值',
                                type: 'line',
                                data: result.data.order_total_price
                            },
                            {
                                name: '课时消耗',
                                type: 'line',
                                data: result.data.order_total
                            }
                        ]
                    }, true);
                });
            },
            // 教练课时统计
            __getApiData__coach: function (startDate = '', endDate = '') {
                var app = this;
                // 请求api数据
                app.coach.loading = true;
                // api地址
                var url = '<?= url('statistics.data/coach') ?>';
                $.post(url, {
                    startDate: startDate,
                    endDate: endDate,
                    coach_id:app.coach.coach_id
                }, function (result) {
                    app.coach.loading = false;


                    //let prices = Object.values(result.data.order_total_price);
                    //let nums = Object.values(result.data.order_total);
                    // let names = Object.values(result.data.names);
                    // console.log(names);
                    //let series1 = [];
                    // prices.forEach(function (value, index, array) {
                    //     series1.push(
                    //         {
                    //             name: names[index]+"课时价值",
                    //             type: 'line',
                    //             data: value
                    //         }
                    //     );
                    // })
                    // nums.forEach(function (value, index, array) {
                    //     series1.push(
                    //         {
                    //             name: names[index]+"课时消耗",
                    //             type: 'line',
                    //             data: value
                    //         }
                    //     );
                    // })
                    // console.log(series1)
                    // let order_total_price =Array.from(result.data.order_total_price);
                    // console.log(order_total_price);
                    //
                    // order_total_price.forEach(function (index,value) {
                    //     console.log(index+' '+value);
                    // })

                    var dom = document.getElementById('echarts-trade3');
                    echarts.init(dom, 'walden').setOption({
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['课时价值', '课时消耗']
                        },
                        toolbox: {
                            show: true,
                            showTitle: false,
                            feature: {
                                mark: {show: true},
                                magicType: {show: true, type: ['line', 'bar']}
                            }
                        },
                        calculable: true,
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: result.data.date
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '课时价值',
                                type: 'line',
                                data: result.data.order_total_price
                            },
                            {
                                name: '课时消耗',
                                type: 'line',
                                data: result.data.order_total
                            }
                        ]
                    }, true);
                });
            },
            // 教练销售统计
            __getApiData__coach_sale: function (startDate = '', endDate = '') {
                var app = this;
                // 请求api数据
                app.coach_sale.loading = true;
                // api地址
                var url = '<?= url('statistics.data/coach_sale') ?>';
                $.post(url, {
                    startDate: startDate,
                    endDate: endDate,
                    coach_id:app.coach_sale.coach_id
                }, function (result) {
                    app.coach_sale.loading = false;

                    var dom = document.getElementById('echarts-trade4');
                    echarts.init(dom, 'walden').setOption({
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['销售业绩', '销售数量']
                        },
                        toolbox: {
                            show: true,
                            showTitle: false,
                            feature: {
                                mark: {show: true},
                                magicType: {show: true, type: ['line', 'bar']}
                            }
                        },
                        calculable: true,
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: result.data.date
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '销售业绩',
                                type: 'line',
                                data: result.data.order_total_price
                            },
                            {
                                name: '销售数量',
                                type: 'line',
                                data: result.data.order_total
                            }
                        ]
                    }, true);
                });
            },
            /**
             * 近七日交易走势
             * @type {HTMLElement}
             */
            drawLine() {
                var dom = document.getElementById('echarts-trade');
                echarts.init(dom, 'walden').setOption({
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['成交额', '成交量']
                    },
                    toolbox: {
                        show: true,
                        showTitle: false,
                        feature: {
                            mark: {show: true},
                            magicType: {show: true, type: ['line', 'bar']}
                        }
                    },
                    calculable: true,
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: <?= $echarts7days['date'] ?>
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '成交额',
                            type: 'line',
                            data: <?= $echarts7days['order_total_price'] ?>
                        },
                        {
                            name: '成交量',
                            type: 'line',
                            data: <?= $echarts7days['order_total'] ?>
                        }
                    ]
                }, true);
            },
            /**
             * 门店课时消耗
             * @type {HTMLElement}
             */
            drawLine_shop() {
                var dom = document.getElementById('echarts-trade1');
                echarts.init(dom, 'walden').setOption({
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['课时价值', '课时消耗']
                    },
                    toolbox: {
                        show: true,
                        showTitle: false,
                        feature: {
                            mark: {show: true},
                            magicType: {show: true, type: ['line', 'bar']}
                        }
                    },
                    calculable: true,
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: <?= $shop7days['date'] ?>
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '课时价值',
                            type: 'line',
                            data: <?= $shop7days['order_total_price'] ?>
                        },
                        {
                            name: '课时消耗',
                            type: 'line',
                            data: <?= $shop7days['order_total'] ?>
                        }
                    ]
                }, true);
            },
            /**
             * 门店销售
             * @type {HTMLElement}
             */
            drawLine_store() {
                var dom = document.getElementById('echarts-trade2');
                echarts.init(dom, 'walden').setOption({
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['课时消耗', '课时价值']
                    },
                    toolbox: {
                        show: true,
                        showTitle: false,
                        feature: {
                            mark: {show: true},
                            magicType: {show: true, type: ['line', 'bar']}
                        }
                    },
                    calculable: true,
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: <?= $storeCourse['date'] ?>
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '课时价值',
                            type: 'line',
                            data: <?= $storeCourse['order_total_price'] ?>
                        },
                        {
                            name: '课时消耗',
                            type: 'line',
                            data: <?= $storeCourse['order_total'] ?>
                        }
                    ]
                }, true);
            }

        }

    });

</script>